<template>
    <view class="maincontent">
        <image class="img-bg" :src="imgBg"></image>
        <view class="header-fixed">
            <page-head  :transparent="imgBg">
                <slot slot="title">
                    <image class="img-title" :src="imgTilte"/>
                </slot>
                <swiper-coupon slot="bottom" :current="current" @onClick="changCurrent" :list="texts"/>
            </page-head>
        </view>
        <goods-list :goods-list="goodsList" :typeText="'领券'"/>
    </view>
</template>

<script>
    import SwiperCoupon from './components/swiper-coupon'
    import GoodsList from '../../components/tb-goods-list2'
    import imgTilte from './img/gengduohaoquan.png'
    import imgBg from './img/redBg.png';

    let page = 1,
        pageSize = 20;
        
    let sids = [{"sid": "1", "remarks": "500以上"}, {"sid": "2", "remarks": "500-300"}, {
        "sid": "3",
        "remarks": "300-200"
    }, {"sid": "4", "remarks": "200-100"}, {"sid": "5", "remarks": "100-1"}];

    export default {
        components: {
            SwiperCoupon,
            GoodsList
        },
        async onReady() {
			this.genCommon();
            await this.getCarousel();
            this.getData();
        },

        onLoad(event) {

        },

        data() {
            return {
                current: 0,
                pageIndex: page,
                goodsList: [],
                imgTilte,
                cids: sids.map(item => item.sid),
                texts: sids.map(item => item.remarks),
                imgBg
            };
        },
        onReachBottom: function () {
            this.getData(this.pageIndex);
        },
        onPullDownRefresh: function () {
            uni.stopPullDownRefresh(); //停止下拉刷新动画
            this.getData();
        },
        methods: {
			genCommon() {
				const that = this
				let url = window.location.href;
				console.log("url===" + url);
				let reg_url = /^[^\?]+\?([\w\W]+)$/,
					reg_para = /([^&=]+)=([\w\W]*?)(&|$|#)/g,
					arr_url = reg_url.exec(url),
					ret = {};
				if (arr_url && arr_url[1]) {
					let str_para = arr_url[1],
						result;
					while ((result = reg_para.exec(str_para)) != null) {
						ret[result[1]] = result[2];
					}
				}
				let token = ret.token;
				console.log("token==" + token);
				if (token != '' && token != 'null' && token != null && token != undefined && token != 'undefined') {
					uni.setStorageSync('token', decodeURI(token));
					uni.setStorageSync('bump', ret.bump);
					uni.setStorageSync('relationId', ret.relationId);
					uni.setStorageSync('mobile', ret.customerId);
				}
			},
            changCurrent(index) {
                this.current = index;
                this.getData()
            },
            async getCarousel() {
                const data = await this.$ajax.get(this.$usereq + '/coupon-product/home/sectionCoupons/getCarousel');
                if (data) {
                    const sids = data.data;
                    this.cids = sids.map(item => item.sid);
                    this.texts = sids.map(item => item.remarks);
                }
            },
            //获取数据
            async getData(pageIndex = page) {
                const data = await this.$ajax.post(this.$usereq + '/coupon-product/home/sectionCoupons/getGoodsInfo', {
                    "pageno": pageIndex,
                    "pagesize": pageSize,
                    sid: this.cids[this.current],
                },'.loading-text');
                if (data) {
                    const mock = data.data;
                    if (pageIndex > page) {
                        this.goodsList = [...this.goodsList, ...mock];
                    } else {
                        this.goodsList = mock;
                    }
                    this.pageIndex = pageIndex + 1
                }
            },
        }
    };
</script>

<style lang="scss">
    .maincontent {
        .img-bg {
            position: fixed;
            width: 750px;
            height: 1108px;
            top: 0;
        }

        .img-title {
            width: 168px;
            height: 34px;
            display: block;
        }
    }
</style>
